<template>
  <div class="head">
    <el-space size="large">
      <ToggleSidebar />
      <Breadcrumb />
    </el-space>
    <el-space size="large">
      <FullScreen v-if="systemStore.isPc" />
      <Notification />
      <SchemeChange />
      <UserInfo />
    </el-space>
  </div>
  <TagsView v-if="systemStore.isPc" />
</template>

<script setup>
import ToggleSidebar from './ToggleSidebar.vue'
import Breadcrumb from './Breadcrumb.vue'
import FullScreen from './FullScreen.vue'
import Notification from './Notification.vue'
import SchemeChange from './SchemeChange.vue'
import UserInfo from './UserInfo.vue'
import TagsView from './TagsView.vue'

import useSystemStore from '@/store/system'

const systemStore = useSystemStore()
</script>

<style lang="scss" scoped>
.head{
  height: var(--el-header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    font-size: 19px;
    cursor: pointer;
  }
  :deep(.el-space__item) {
    display: flex;
  }
}

</style>
